<template>
	<div class="flex items-center">
		<base-icon
			class="text-t-header text-[20px] duration-300 app-text-react"
			:class="{ 'rotate-90': !layoutStore.menuOpen }"
			name="menu"></base-icon>
		<!-- <transition @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave">
			<base-image
				v-if="layoutStore.menuOpen"
				class="h-[38px] relative -top-[3px] -left-[10px]"
				src="logo-white.svg"
				alt="" />
		</transition> -->
	</div>
</template>
<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import { useLayoutStore } from '@/store'
// import gsap from 'gsap'
defineOptions({
	name: 'AppMenuIcon'
})

const layoutStore = useLayoutStore()

// const onBeforeEnter = (el: any) => {
// 	gsap.set(el, {
// 		width: 0,
// 		opacity: 0,
// 		duration: 0.3
// 	})
// }

// const onEnter = (el: any, done: any) => {
// 	gsap.to(el, {
// 		width: '60px',
// 		opacity: 1,
// 		duration: 0.3,
// 		onComplete: done
// 	})
// }

// const onLeave = (el: any, done: any) => {
// 	gsap.to(el, {
// 		width: 0,
// 		opacity: 0,
// 		duration: 0.3,
// 		onComplete: done
// 	})
// }
</script>
